<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易云音乐</title>
<link rel="stylesheet" href="./css/fyz.public.style-1.1.min.css">
<link rel="stylesheet" href="./css/fyz.in.out.style-1.0.2.min.css">
<link rel="stylesheet" href="./css/index.css">
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script>
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
</head>
<body ng-app="myApp" ng-controller="myAppControl">
<div class="top">
	<div class="topBox m c">
		<h1 class="logo fl">
			<a href="#/discover/recom">{{title}}</a>
		</h1>
		<ul class="topnav fl c">
			<li ng-repeat="x in topnav"><a ui-sref="{{x.name}}" ng-class="{ahover:$first}">{{x.title}}</a></li>			
		</ul>
	</div>
	<div ui-view></div>
	<!-- discover template -->
	<script id="discover" type="text/ng-template">
		<div class="topBoxNav">
			<ul class="topBoxNav m c">
				<li ng-repeat="x in topBoxNav"><a ui-sref="discover.{{x.name}}"><span>{{x.title}}</span></a></li>			
			</ul>
		</div>
		<div ui-view></div>
	</script>
	<!-- my template -->
	<script id="my" type="text/ng-template">
		<div class="topBoxNav">
			<ul class="topBoxNav m c">
				<li><a ui-sref="my.login"><span>登陆</span></a></li>
				<li><a ui-sref="my.dislogin"><span>退出</span></a></li>
			</ul>
		</div>
		<div ui-view></div>
	</script>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(["$urlRouterProvider","$stateProvider",function($urlRouterProvider,$stateProvider){
	$urlRouterProvider.when("", "/discover/recom");
    $stateProvider.state("discover",{//父路由
        url: '/discover',
        controller: 'discoverController',
        templateUrl:"discover"
    }).state('discover.recom',{
    	url : '/recom',
    	template : "这里是推荐内容"
    }).state('discover.toplist',{
    	url:'/toplist',
    	template:'这里是排行榜'
    }).state("my",{
    	url: '/my',
    	templateUrl : 'my'
    });
}]);
myApp.controller('myAppControl',function($scope){
	$scope.title = "网易云音乐";
	$scope.topnav = [
		{title:'发现音乐',name:'discover'},
		{title:'我的音乐',name:'my'},
		{title:'朋友',name:'friend'},
		{title:'商城',name:'shop'},
		{title:'音乐人',name:'musician'},
		{title:'下载客户端',name:'download'},
	];
});
myApp.controller('discoverController',function($scope){
	$scope.topBoxNav = [
		{title:'推荐',name:'recom'},
		{title:'排行榜',name:'toplist'},
		{title:'歌单',name:'playlist'},
		{title:'主播电台',name:'djradio'},
		{title:'歌手',name:'artist'},
		{title:'新碟上架',name:'album'},
	];
});
</script>
</html>